<template>
    <div class="chapter" :data-height="bottom_height">
        <div v-if="!newSbj">
            <div class="chapter_top">
                <div ref="zjlx_div" @click="topbtnClick($event,'jbxx')" v-bind:class="[showdiv === 'jbxx' ? 'chapter_topbtn_checked' : '', 'chapter_topbtn']" >
                    基本信息
                </div>
                <div ref="ksbt_div" @click="topbtnClick($event,'ktkm')" v-bind:class="[showdiv === 'ktkm' ? 'chapter_topbtn_checked' : '', 'chapter_topbtn']" lang="ksbt">
                	已开通科目
                </div>
                <div ref="ksbt_div" @click="topbtnClick($event,'wdxx')" v-bind:class="[showdiv === 'wdxx' ? 'chapter_topbtn_checked' : '', 'chapter_topbtn']" lang="ksbt">
                	我的消息
                </div>
                <div ref="ksbt_div" @click="topbtnClick($event,'gxrz')" v-bind:class="[showdiv === 'gxrz' ? 'chapter_topbtn_checked' : '', 'chapter_topbtn']" lang="ksbt">
                	更新日志
                </div>
                <div ref="ksbt_div" @click="topbtnClick($event,'ksxx')" v-bind:class="[showdiv === 'ksxx' ? 'chapter_topbtn_checked' : '', 'chapter_topbtn']" 
                v-if="appCName.indexOf('尊享协议班')>-1||appCName.indexOf('精英定制班')>-1||appCName.indexOf('密训私教班')>-1 ||appCName.indexOf('密训协议班')>-1||appCName.indexOf('VIP协议班')>-1"
                lang="ksbt">
                	考生信息
                </div>
            </div>
            <div class="chapter_content">
                <ul class="chapter_contentleft">
                    <li v-bind:class="[showdiv === 'jbxx' ? 'content_show' : 'content_hide']">1</li>
                    <li v-bind:class="[showdiv === 'ktkm' ? 'content_show' : 'content_hide']">
                        <div class="subList" v-bind:style="{height: bottom_height-topnavHeight  + 'px'}">
                            <ul>
                                <li v-for="item in subjectList" :data-status="item.status" >
                                    <span>{{ item.CName }} - {{item.AppVnName}}</span><i class="status" v-if="item.status">当前</i>
                                    <span class="endtime">班次使用到期时间：{{ item.EndTime | formatDate}}</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li v-bind:class="[showdiv === 'wdxx' ? 'content_show' : 'content_hide']">
                        <div class="messgeBox">
                            <div class="messgeMenu" v-bind:style="{height: bottom_height-topnavHeight  + 'px'}">
                                <ul>
                                    <li @click="newsClick($event,'testFeed')" v-bind:class="[showFeed === 'testFeed' ? 'news_topbtn_checked' : '', 'news_topbtn']">试题反馈</li>
                                    <li @click="newsClick($event,'videoFeed')" v-bind:class="[showFeed === 'videoFeed' ? 'news_topbtn_checked' : '', 'news_topbtn']">视频反馈</li>
                                    <li @click="newsClick($event,'talk')" v-bind:class="[showFeed === 'talk' ? 'news_topbtn_checked' : '', 'news_topbtn']">讨论回复</li>
                                    <li @click="newsClick($event,'systerm')" v-bind:class="[showFeed === 'systerm' ? 'news_topbtn_checked' : '', 'news_topbtn']">系统消息</li>
                                    
                                </ul>
                            </div>
                            <div class="messgeContent" v-bind:style="{height: bottom_height-topnavHeight  + 'px'}">
                                <ul v-bind:style="{height: bottom_height-topnavHeight  + 'px'}">
                                    <li v-bind:class="[showFeed === 'testFeed' ? 'content_show1' : 'content_hide1']">111111111</li>
                                    <li v-bind:class="[showFeed === 'videoFeed' ? 'content_show1' : 'content_hide1']">2222222222222222</li>
                                    <li v-bind:class="[showFeed === 'talk' ? 'content_show1' : 'content_hide1']">55555555555555555</li>
                                    <li v-bind:class="[showFeed === 'systerm' ? 'content_show1' : 'content_hide1']">
                                        <ul  v-bind:style="{height: bottom_height-topnavHeight  + 'px'}" v-if="systermList.length">
                                            <li v-for="item in systermList" :data-status="item.status">
                                                <div>{{item.title}}</div>
                                                <span>{{item.starttime  | formatDate}}</span>
                                                <span class="lookDetial" @click="lookDetial()">立即查看</span>
                                                <div class="detialContent">{{item.content}}</div>
                                            </li>
                                        </ul>
                                        <div v-if="!systermList.length" class="nodata">您还没有收到任何通知～</div>
                                    </li>
                                    
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li v-bind:class="[showdiv === 'gxrz' ? 'content_show' : 'content_hide']">4</li>
                    <li v-bind:class="[showdiv === 'ksxx' ? 'content_show' : 'content_hide']">
                        <div class="informationBox" v-bind:style="{height: bottom_height-topnavHeight  + 'px'}">
                            <div class="kaoshengBox"  v-bind:style="{height: bottom_height-topnavHeight  + 'px'}">
                                <ul class="kaoshengList">
                                    <li>
                                        <div class="sdutent">姓名</div>
                                        <input id="txtName" class="txtName" :disabled='isdisabledFn' style="outline:none;border:0px;"   v-model="changeUsername"  autofocus="autofocus" v-on:input="watchName" placeholder="请输入考生的真实姓名">
                                    </li>
                                    <li>
                                        <div class="sdutent">身份证</div>
                                        <input id="txtNameId" class="txtName" :disabled='isdisabledFn' style="outline:none;border:0px;" maxlength="18"  v-model="changeUserid" autofocus="autofocus" v-on:input="watchNameid" placeholder="请输入考生的身份证号码">
                                    </li>
                                    <li v-if="!isdisabledFn" class="qianshu" @click="agreeBtn">
                                        <img :src="xieyicheckBol ? xieyicheck : xieyichecked" alt="" >
                                        <span>我已全部阅读并同意签署 <b>《专属保障协议》</b></span>
                                    </li>
                                </ul>
                                <div :class="checkit ? 'checkit' : 'checkited' " @click="checkitFn(checkit)">{{isdisabledFn ? '已提交':'提交'}}</div>
                                <ul class="notice">
                                    <li style="color:#333">
                                        <img src="../../../images/gantan.png" alt="">
                                        <span>注意事项</span>
                                    </li>
                                    <li>
                                        <span>1、考生信息提交后不可修改，请认真核查，确保完整、准确；</span>
                                    </li>
                                    <li>
                                        <span>2、如果信息有误、您将无法享受重学服务；</span>
                                    </li>
                                    <li>
                                        <span>3、客服联系方式</span><br>
                                        <span>客服QQ：4007278800   客服电话：400-727-8900</span>
                                    </li>
                                    <li v-if="isdisabledFn">
                                        <span>4、查看已签订的<b>《专属保障协议》</b>；</span>
                                    </li>
                                </ul>
                            </div> 
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {getReplaceChapter,getSystermNews,getPersonalInfo,getPersonalSave,getPersonalAccept} from '../../../config/getData';
    import {datetimeFormat,getAppEName,getAppID,getCookie} from '../../../config/mUtils';
    import {getVipAppData} from "../../../config/yingPrg";
    import home_no from '../../../images/xieyicheck.png';
    import home from '../../../images/xieyichecked.png';
    export default {
        data: function() {
            return {
                newSbj:false,
                showdiv :'jbxx',
                showFeed:'systerm',
                topnavHeight: window.innerHeight<721 ? 40 : 50,
                bottom_height:'',
                subjectList:[],
                systermList:[],
                appCName:'',
                isdisabledFn:'',
                xieyicheck:home_no,
                xieyichecked:home,
                xieyicheckBol:true,
                checkit:true,
                changeUsername:'',
                changeUserid:''
            }
        },
        filters:{
            formatDate(time){
                let date = new Date(time);
                return datetimeFormat(date,'yyyy-MM-dd');
            }
        },
        methods:{
            topbtnClick:function (el,type) {
                this.showdiv=type;        //本人组件显示
                
                if(type == 'ktkm'){
                    //获取已开通科目
                    this.getVipSubject()
                }else if(type == 'ksxx'){
                    this.getPersonal()
                }
                
            },
            newsClick:function(el,type){
                this.showFeed=type; 
                let AppID = getAppID();
                let channelID = 2;
                let guid = localStorage.getItem('guid');
                let vip = 1;
                if(type == 'systerm'){
                    getSystermNews(AppID,channelID,guid,vip).then(res=>{
                        if(res){
                            if(res.data){
                                this.systermList = res.data;
                            }else{
                                this.show
                            }
                        }else{
                            
                        }
                    })
                }
            },
            agreeBtn:function(){
                this.xieyicheckBol = !this.xieyicheckBol;
                if(!!this.changeUsername && !!this.changeUserid && !this.xieyicheckBol){
                    this.checkit = false;
                }else{
                    this.checkit = true;
                }
            },
            watchName:function(el){
                if(el.target.value.length > 0  && !!this.changeUserid && !this.xieyicheckBol){
                    this.checkit = false;
                }else{
                    this.checkit = true;
                }

            },
             watchNameid:function(el){
                if(el.target.value.length > 0 && !!this.changeUsername && !this.xieyicheckBol){
                    this.checkit = false;
                }else{
                    this.checkit = true;
                }
            },
             //获取已开通科目
            getVipSubject:function(){
                let vipAppData = localStorage.getItem('vipAppData');
                let appEName = getAppEName();
                let res;
                if(localStorage.getItem('vipAppData')){
                    vipAppData = JSON.parse(localStorage.getItem('vipAppData'));
                }else{
                    getVipAppData().then(res=>{
                        if(res){
                            vipAppData = JSON.parse(res);
                        }else{
                            
                        }
                    })
                }
                for(var i=0;i<vipAppData.length;i++){
                    if(appEName == vipAppData[i].AppEName && JSON.parse(getCookie('AppVerOperJSON')).VerNO  == vipAppData[i].AppVn){
                        vipAppData[i].status = true;
                        res = [vipAppData[i]].concat(vipAppData.filter((item) => item != vipAppData[i]));//将当前的科目排在第一位
                    }
                }
                this.subjectList = res;
            },
            //获取考生信息
            getPersonal:function(){
                let AppID = getAppID();
                let _this = this;
                if(this.appCName.indexOf('尊享协议班')>-1||this.appCName.indexOf('精英定制班')>-1||this.appCName.indexOf('密训私教班')>-1 ||this.appCName.indexOf('密训协议班')>-1||this.appCName.indexOf('VIP协议班')>-1) {// 
                    let vn = JSON.parse(getCookie('AppVerOperJSON')).VerNO;
                    getPersonalInfo(AppID,vn).then(res=>{
                        if(res){
                            if(res.status== 200){
                                console.log(res.data.id)
                                _this.changeUsername = res.data.name;
                                _this.changeUserid = res.data.id;
                                _this.isdisabledFn = true;
                                _this.checkit = true;
                            }else{
                                _this.isdisabledFn = false;
                                _this.checkit = true;
                                
                            }
                        }
                    })

                }
            },
            //提交并审核签好的考生信息
            checkitFn:function(checkit){
                if(checkit){
                    return;
                }
                var _this = this;
                let AppID = getAppID();
                let guid = localStorage.getItem('guid');
                let vn = JSON.parse(getCookie('AppVerOperJSON')).VerNO;
                var str = JSON.stringify({"username":localStorage.getItem('username'),"vername":"专属保障协议"})
                
                // _this.tijiao();
                this.$vux.alert.show({
                    content: '请确保所填写的考生信息与准考证上的信息一致，否则你将无法享受重学服务',
                    title: '温馨提示',
                    onHide() {
                        getPersonalSave(guid,AppID,vn,_this.changeUsername,_this.changeUserid).then(res =>{
                            if(res){
                                
                            }
                        })
                        getPersonalAccept(guid,AppID,vn,str).then(res =>{
                            if(res){
                                if(res.status == 200){
                                    getPersonalSave(guid,AppID,vn,_this.changeUsername,_this.changeUserid).then(res =>{
                                        if(res.status == 200){
                                            _this.$vux.alert.show({
                                                content: '添加成功',
                                                onshow(){
                                                    console.log(123)
                                                }
                                            });
                                            _this.isdisabledFn = true;
                                            _this.checkit = true;
                                        }else{
                                            _this.isdisabledFn = false;
                                            _this.checkit = true;
                                        }
                                    })
                                }
                            }
                        })
                    }
                });
                
            },
            lookDetial:function(){

            }
           
        },

        watch:{   //watch()监听某个值（双向绑定）的变化，从而达到change事件监听的效果
            changeUsername:function(){
                this.changeUsername =  this.changeUsername;
            },
            changeUserid:function(){
                this.changeUserid=this.changeUserid.replace(/[\W]/g,'');
            }
        },
        mounted:function () {
            let height_1=  Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
            this.bottom_height = height_1 - 112-4;
            let appCName =JSON.parse(getCookie('SELECTEDAPP')).AppVname;
            this.appCName = appCName;
        }
    }
</script>

<style scoped lang="less">
    @main_color:#5bb8ff;
    @white:#fff;
    @green_color:#66cc80;
    @yellow_color:#ffb73e;
    @red_color:#fc7a7e;
    @black:#000;
    @color_6:#666;
    @color_3:#333;
    @color_d:#ddd;
    .chapter_top{
        width: 100%;
        padding-left: 2%;
        height: 50px;
        border-bottom: 1px solid #ddd;
        .chapter_topbtn{
            font-size: 14px;
            float: left;
            margin: 10px;
            padding: 5px 10px;
            cursor: pointer;

        }
        .chapter_topbtn_checked{
            background: #F3F3F3;
            color: @main_color;
            border-radius: 4px;
        }
    }
    .chapter_contentleft{
    	.content_hide{
    		display:none;
        }
        .content_hide1{
    		display:none;
        }
    	.informationBox{
    	   width:100%;
    	   background:#F3F3F3;
    	   display: flex;
          flex-direction: column;
          align-items: center;
          .kaoshengBox{
              background: #fff;
              width:50%;
              .kaoshengList{
                    margin: 0 25%;
                    margin-top: 15%;
                    position: relative;
                    li{ 
                        color:#333;
                        margin-bottom: 10px;
                        overflow: hidden;
                        height: 48px;
                        line-height: 35px;
                        .sdutent{
                            float: left;
                            overflow: hidden;
                            color: #999;
                        }
                        .txtName{
                            background: #f3f3f3;
                            padding-left: 3.5%;
                            border-radius: 5px;
                            color: #999;
                            width: 80%;
                            float: right;
                        }
                        input::-webkit-input-placeholder {
                            color: #999;
                        }
                        
                    }
                    .qianshu{
                        img{
                            vertical-align: sub;
                        }
                        b{
                            color:#5bb8ff;
                        }
                        font-size: 13px;
                        float: right;
                    }
               }
               .notice{
                    margin: 0 23%;
                    margin-top: 15%;
                    color: #999;
                    li{
                        line-height: 25px;
                        img{
                            width: 20px;
                            vertical-align: sub;
                        }
                        b{
                            color:#5bb8ff;
                        }
                    }
                   
               }
               .checkit{
                    width: 18%;
                    margin: 0 42%;
                    border-radius: 6px;
                    margin-top: 10%;
                    line-height: 40px;
                    clear: both;
                    background: #ccc;
                    text-align: center;
                    color: #fff;
                    font-size: 15px;
                }
                .checkited{
                    background: #5bb8ff;
                    width: 24%;
                    margin: 0 38%;
                    border-radius: 6px;
                    margin-top: 10%;
                    line-height: 50px;
                    clear: both;
                    text-align: center;
                    color: #fff;
                    font-size: 15px;
                }
           }
    	}
    	.subList{
            width:100%;
            overflow: auto;
            li{
                display:block;
                height: 50px;
                border-bottom: 1px solid #DFDFDF;
                line-height: 50px;
                padding-left: 2%;
                position: relative;
                cursor: pointer;
                .endtime{
                    position: absolute;
                    right: 2%;
                    color: #999;
                    font-size: 14px;
                }
                .status{
                    font-style: normal;
                    border:1px solid #fc7a7e;
                    border-radius: 10px;
                    color: #fc7a7e;
                    font-size: 13px;
                    padding: 2px;
                    margin-left: 1%;
                }
            }
    	}
    	.messgeBox{
    	   .messgeMenu{
    	       width:15%;
               background:#F3F3F3;
                float: left;
                border-right:  1px solid #DFDFDF;
    	       li{
    	            color:#333;
    	            display:block;
    	            height: 50px;
                    border-bottom: 1px solid #DFDFDF;
                    line-height: 50px;
                    padding-left: 10%;
               }
                .news_topbtn_checked{
                    color:#5bb8ff;
                }
           }
           .messgeContent{
               display: inline-block;
                width: 85%;
                background: #e0edf7;
                ul{
                    // overflow: scroll;
                    li{
                        color:#333;
                        line-height: 50px;
                        .nodata {
                            text-align: center;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                        }

                    }
                   
                }
                
           }
    	}
    	.content_show{
            display:block;
            // li{
            //     display:block;
            // }
        }
        .content_show1{
            display:block;
        }
    }
    @media screen and (max-height: 720px){
        .chapter_top{
            height: 40px;
            .chapter_topbtn{
                margin: 8px;
                padding: 2px 10px;
            }
        }

    }
</style>
